<template>
	<view class="vip">
		<view class="vip-bag">
			<view class="vip-bag-vip">
				<view class="vip-bag-vip-title">黄金会员</view>
				<view class="vip-bag-vip-jifent">积分</view>
				<view class="vip-bag-vip-jifenb">20000</view>
				<!-- <view class="vip-bag-vip-leiji">累计消费300元</view> -->
				<image @click="maClick()" class="erweim" src="../../static/vip/erweim.png"></image>
			</view>
		</view>
		
		<view>
			2323
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			maClick(){
				console.log(2);
			}
		}
	}
</script>

<style lang="less">
	.vip {
		.vip-bag {
			width: 750rpx;
			height: 300rpx;
			background-image:url('../../static/vip/1.png');
			.vip-bag-vip {
				background-image: url('../../static/黄金卡.png');
				width: 660rpx;
				height: 340rpx;
				position: relative;
				top: 80rpx;
				margin: auto;
				background-size: 100% 100%;
				.vip-bag-vip-title {
					color: #753a01;
					font-weight: bold;
					padding-left: 60rpx;
					font-size: 44rpx;
					padding-top: 40rpx;
				} 
				.vip-bag-vip-jifent {
					color: #ed9714;
					padding-left: 60rpx;
					padding-top: 10rpx;
				}
				.vip-bag-vip-jifenb {
					color: #753a01;
					font-weight: bold;
					padding-left: 60rpx;
					font-size: 40rpx;
				}
				.vip-bag-vip-leiji {
					color: #ed9714;
					padding-left: 60rpx;
					padding-top: 10rpx;
					font-size: 30rpx;
				}
				.erweim {
					width: 120rpx;
					height: 120rpx;
					margin-left: auto;
					display: block;
					position: absolute;
					right: 30rpx;
					top: 10rpx;
					margin-left: -20rpx;
				
					// top: -140rpx;
					// left: -32rpx;
					opacity: 0.2;;
				}
			}
		}
	}
</style>